<template>
	<view class="index">
		<view class="status_bar"></view>
		<view class="" v-if="data.title">
			<view class="title  flex-jc-ac">
				<view class="ac">{{ data.title }}</view>
			</view>
			<view class="author ac">{{ data.author }}</view>
			<rich-text class="info" :style="{ 'font-size': size + 'rpx' }" :nodes="data.content" />
		</view>
		<view class="fix flex-column flex-ac">
			<uni-fab ref="fab" :content="content" @trigger="trigger" />
		</view>
	</view>
</template>

<script>
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
export default {
	components: {
		uniDrawer
	},
	data() {
		return {
			userInfo: {},
			size: 32,
			content: [
				{
					text: 'A+'
				},
				{
					text: 'A-'
				},
				{
					iconPath: '/static/home/save.png',
					selectedIconPath: '/static/home/save-active.png',
					active: false
				},
				{
					iconPath: '/static/home/pl.png'
				},
				{
					iconPath: '/static/home/gx.png'
				}
			],
			data: {}
		};
	},
	onLoad() {
		this.getText();
		// this.getUserInfo();
	},
	methods: {
		goPath(item) {
			if (item.path) {
				uni.navigateTo({
					url: item.path
				});
			}
		},
		showDrawer() {
			this.$refs.drawer.open();
		},
		getText() {
			uni.request({
				url: 'https://interface.meiriyiwen.com/article/random?dev=1',
				success: res => {
					this.data = res.data.data;
				},
				fail: () => {
					uni.showToast({
						title: '获取文章失败',
						icon: 'none'
					});
				}
			});
		},
		getUserInfo() {
			uniCloud
				.callFunction({
					name: 'user-center',
					data: {
						action: 'checkToken'
					}
				})
				.then(res => {
					uni.setStorageSync('userInfo', res.result.userInfo);
					this.userInfo = res.result.userInfo;
				});
		},
		trigger(e) {
			switch (e.index) {
				case 0:
					if (this.size < 50) {
						this.size += 2;
					}
					break;
				case 1:
					if (this.size > 24) {
						this.size -= 2;
					}
					break;
				case 2:
					this.content[2].active = !e.item.active;
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/comment/comment'
					});
					break;
				case 4:
					this.getText();
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.name {
	font-size: 56rpx;
	margin-bottom: 20rpx;
}

.list {
	padding: 20rpx 0;
	width: 100%;
	text-align: center;
}

.scroll-Y {
	height: calc(100vh - 680rpx);
	text-align: center;
	margin-top: 40rpx;
	color: $uni-color-2;

	.authors {
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}

	.infos {
		font-size: 24rpx;
	}
}

.title {
	font-size: 42rpx;
	margin-bottom: 20rpx;
	position: relative;
}

.info {
	text-indent: 80rpx;
	font-size: 30rpx;

	/deep/ p {
		margin-top: 20rpx;
	}
}

.top-user {
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	border-radius: 50%;
	left: -20rpx;
	top: -20rpx;
}

.pop-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin-bottom: 20rpx;
}

.author {
	font-size: 26rpx;
	color: #dd524d;
}

.fix {
	position: fixed;
	right: 10rpx;
	bottom: 130rpx;
}
</style>
